<template>
    <div class="search">
        <div class="search-item">
            <div :class="{ 'search-active': currentSearchCateIdx == -1 }" @click="currentSearchCateIdx = -1">收藏</div>

            <div :class="{ 'search-active': currentSearchCateIdx == idx }" v-for="(item, idx) in searchEngines"
                key="item.id" @click="currentSearchCateIdx = idx">{{ item.name }}
            </div>
        </div>
        <div class="ipt"><input ref="ipt" v-model="searchWords" @input="bookmarkFilter" @keyup.enter="search"
                type="text"></div>
        <div class="search-item">
            <div :class="{ 'search-active': currentSearchIdx == idx }" v-for="(item, idx) in currentSearches"
                key="item.id" @click="changeCurrentSearchIdx(idx)">{{ item.name }}</div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeUpdate, onMounted, ref, watch } from 'vue';

const props = defineProps(['searchEngines'])
const emits = defineEmits(['filter'])

// 当前搜索引擎分类索引
const currentSearchCateIdx = ref(null)
// 当前搜索引擎
const currentSearches = ref(null)
// 当前搜索引擎索引
const currentSearchIdx = ref(null)

const searchWords = ref(null)

const ipt = ref(null)


onBeforeUpdate(() => {
    currentSearchIdx.value = localStorage.getItem("local:currentSearchIdx")
    currentSearchCateIdx.value = localStorage.getItem("local:currentSearchCateIdx")
    if (props.searchEngines && props.searchEngines.length > 0 && currentSearchCateIdx.value > -1 && currentSearchCateIdx.value < props.searchEngines.length && props.searchEngines[currentSearchCateIdx.value]) {
        currentSearches.value = props.searchEngines[currentSearchCateIdx.value].search_engines
    }
})

onMounted(() => {
    if (ipt.value) {
        ipt.value.focus()
    }
})

watch(() => currentSearchCateIdx.value, (newValue, oldValue) => {
    localStorage.setItem("local:currentSearchCateIdx", newValue)
    if (newValue < 0) {
        currentSearches.value = []
    } else {
        currentSearches.value = props.searchEngines[newValue].search_engines
        currentSearchIdx.value = 0
    }
})



const changeCurrentSearchIdx = (idx) => {
    currentSearchIdx.value = idx
    localStorage.setItem("local:currentSearchIdx", idx)
}


const bookmarkFilter = () => {
    emits('filter', searchWords.value)
}

const search = () => {
    if (currentSearchCateIdx.value < 0) {//收藏夹搜索
        emits('filter', searchWords.value)
        searchWords.value = null
    } else {//搜索引擎
        let url = props.searchEngines[currentSearchCateIdx.value].search_engines[currentSearchIdx.value].uri
        url = url.replace("%s", searchWords.value)
        window.open(url, "_blank")
    }
}
</script>

<style scoped>
.search {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.search-item {
    display: flex;
}

.search-item>div {
    padding: 10px 20px;
    cursor: pointer;
}

.ipt {
    width: 62%;
    margin: 10px 20px;
}

.ipt>input {
    width: 100%;
    height: auto;
    font-size: 23px;
    border-radius: 5px;
    padding: 10px 20px;
}

.search-active {
    background-color: var(--bg1);
    border-radius: 5px;
}
</style>
